<template>
  <div style="padding: 30px;">
    <div class="box-card">
      <div style="font-weight: 700;font-size: 22px;margin: 20px 0;">
        详情
      </div>
      <div class="f-column-between">
        <div class="f-row">
          <div style="width: 40%;"> <span>真实名称：{{details.realName}}</span></div>
          <div style="width: 40%;"><span>加入时间：{{details.createTime}}</span> </div>
        </div>
        <div style="margin-top: 20px;" class="f-row">
          <div style="width: 40%;"> <span>手机：{{details.phone}}</span></div>
          <div style="width: 40%;"><span>邮箱：{{details.email}}</span> </div>
        </div>
        <div style="margin-top: 20px;" class="f-row">
          <div style="width: 40%;"> <span>肖像照：</span>
            <a :href="details.idCardImg3" target="_blank" style="color: #00aaff;" v-if="details.idCardImg3_a">证件.pdf</a>
            <el-image v-else :src="details.idCardImg3" :preview-src-list="[details.idCardImg3]" fit="scale-down" style="width: 50px;border-radius: 5px;">
            </el-image>
          </div>
          <div style="width: 40%;"><span>证件类型：{{details.identityType == 0?'身份证':'护照'}}</span> </div>
        </div>
        <div style="margin-top: 20px;" class="f-row">
          <div style="width: 40%;"> <span>身份证正面(或者护照照片正面)：</span>
            <a :href="details.idCardImg1" target="_blank" style="color: #00aaff;" v-if="details.idCardImg1_a">证件.pdf</a>
            <el-image v-else :src="details.idCardImg1" :preview-src-list="[details.idCardImg1]"  fit="scale-down" style="width: 50px;border-radius: 5px;">
            </el-image>
          </div>
          <div style="width: 40%;"> <span>身份证反面（或者护照照片反面）：</span>
            <a :href="details.idCardImg2" target="_blank" style="color: #00aaff;" v-if="details.idCardImg2_a">证件.pdf</a>
            <el-image v-else :src="details.idCardImg2" :preview-src-list="[details.idCardImg2]" fit="scale-down" style="width: 50px;border-radius: 5px;">
            </el-image>
          </div>
        </div>
        <div style="margin-top: 20px;" class="f-row">
          <div style="width: 40%;white-space:nowrap;" class="f-row-Hcenter"> <span>审批描述： </span>
            <el-input v-if="details.status == 2 " v-model="ruleForm1.remark" placeholder="请输入内容"></el-input><span>{{details.approvalDesc}}</span>
          </div>
          <div style="width: 40%;" class="f-row-between">
            <span>
              KYC状态：
              {{details.status == 0 ?'未认证':''}}
              {{details.status == 1 ?'初级认证通过':''}}
              {{details.status == 2 ?'高级认证中':''}}
              {{details.status == 3 ?'高级认证通过':''}}
              {{details.status == 4 ?'高级认证不通过':''}}
            </span>
            <div v-if="details.status == 2 ">
              <el-button type="success" plain @click="stepsBtn(2)">不通过</el-button>
              <el-button type="success" plain @click="stepsBtn(1)"> 通过</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
  import serveApi from "@/api/serveApi"
  export default {
    data() {
      return {
        routeData: {},
        query1: {},
        details: {},
        ruleForm1: {
          userId: '',
          status: '',
          remark: '', // string审批描述
        }
      }
    },
    mounted() {
      this.userId = this.$store.state.userInfo.id;
      this.routeData = this.$route.query
      this.getDetails();
    },
    methods: {
      getDetails() {
        let that = this;
        that.query1.userId = that.routeData.id;
        serveApi.user_detail(that.query1).then(res => {
          if (res.status == "0000") {
            if (res.data) {
              that.details = res.data;
            }
          } else {
            that.$message.error(res.message);
          }
        });
      },
      stepsBtn(e) {
        this.ruleForm1.status = e;
        this.ruleForm1.userId = this.routeData.id;
        serveApi.user_kycAudit(this.ruleForm1).then(res => {
          if (res.data) {
            this.$message.success('保存成功');
          } else {
            this.$message.error(res.message);
          }
        });
      }

    }
  }
</script>

<style>
  .box-card {
    padding: 25px;
    box-shadow: 0px 0px 10px 0px rgba(178, 178, 178, 0.2);
    border-radius: 4px;
    background-color: rgba(77, 231, 231, 1.0);
  }
</style>
